<template>
	<div>
		<el-popover placement="bottom" width="150" trigger="click" @hide="updateCheck">
			<div class="customCkeckbox text-sm">
				<el-checkbox-group v-model="isNameShow" @change="handleCheckedChange">
					<el-checkbox name="type" v-for="(item,index) in customCol" :label="item.label"
						:checked="item.isChecked" v-if="item.is_show==1"></el-checkbox>
				</el-checkbox-group>
			</div>
			<el-button icon="el-icon-arrow-down" slot="reference">自定义列</el-button>
		</el-popover>
	</div>
</template>

<script>
	export default {
		name: 'basetable',
		props:{
			isNameShow:Array,
			customCol:Array,
			dropCol:Array
		},
		methods: {
			//更新列表
			updateCheck(){
				let dropCol = JSON.parse(localStorage.getItem('dropCol'))
				this.$parent.changeDragDrop(dropCol)
			},
			//自定义列
			handleCheckedChange(value){
				this.dropCol.forEach((val,key)=>{
					var arrindex=value.findIndex((item, index, arr)=>{
						return item==val.label
					})
					if(arrindex==-1){
						val.isChecked=false
					}else{
						val.isChecked=true
					}
				})
				localStorage.setItem('dropCol', JSON.stringify(this.dropCol))
				this.updateCheck()
				this.columnDrop()
			},
			// 列拖拽
			columnDrop() {
				const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
				this.sortable = this.$sortable.create(wrapperTr, {
					animation: 180,
					delay: 0,
					onEnd: evt => {
						const dropCol=this.dropCol.filter(item=>{return item.isChecked})
						const oldItem = dropCol[evt.oldIndex]
						const newItem = dropCol[evt.newIndex]
						const oldIndex = this.dropCol.findIndex(item => item.id == oldItem.id);
						const newIndex = this.dropCol.findIndex(item => item.id == newItem.id);
						this.dropCol.splice(oldIndex, 1)
						this.dropCol.splice(newIndex, 0, oldItem)
						this.key ++
						this.col = this.dropCol
						this.dropCol=this.dropCol
						this.$parent.changeDragDrop(this.dropCol)
					}
				})
			}
		}
	};
</script>

<style lang="less">
	.customCkeckbox {
		padding: 0 20px;
	
		.el-checkbox {
			width: 100%;
			line-height: 26px !important;
			font-size: 16px !important;
		}
	
		/deep/.el-checkbox__inner {
			width: 18px;
			height: 18px;
		}
	
		/deep/.el-checkbox__inner::after {
			top: 3px;
			left: 6px;
		}
	}
</style>
